@charset "utf-8";
@import "init.scss";
@import "common.scss";
.big_box {
    width: 100%;
    margin: 29px auto;
}

.top_box {
    width: 1064px;
    height: 1685px;
    background: black;
    margin: 0 auto;
}

.tuijian {
    margin: 0 40px;
    p:first-of-type {
        font-size: 33px;
        color: white;
    }
    .tuijianlan {
        border-bottom: 1px solid #4d4d4d;
        div {
            display: inline-block;
            margin: 0 5px 15px;
        }
        p {
            font-size: 12px;
            line-height: 36px;
        }
    }
}

//  星巴克top部分结束
//.head_box{
//  width: 1064px;
//  height: 334px;
//  background: skyblue;
//  margin: 0 auto;
//}
.mid_box {
    width: 156px;
    height: 1150px;
    background-color: black;
    margin: 0px auto;
    .zuo_top {
        width: 205px;
        height: 1150px;
    }
    .xuanze_box {
        width: 155px;
        margin-left: 44px;
    }
    ul {
        display: block;
        width: 156px;
        margin: 30 auto;
        color: #747373;
        font-size: 14px;
        line-height: 40px;
        text-align: center;
        li {
            background: #252525;
            border-bottom: 5px solid black;
            padding: 0px 27px 0px 52px;
            &:hover {
                transform: translateX(3px);
                cursor: pointer;
            }
            a {
                color: #747373;
            }
            a:hover {
                color: white;
            }
        }
    }
    li:hover {
        color: #ffffff;
    }
    //  <!--左侧----左上开始-------->
    .zuo_mid {
        width: 156px;
        height: 481px;
        background: #252525;
        text-align: center;
        color: #139ab8;
        &:hover {
            transform: translateY(2px);
            box-shadow: 0 -5px 5px 2px skyblue;
        }
        span {
            display: inline-block;
            font-size: 14px;
            margin: 13px auto;
            &:hover {
                color: skyblue;
                transform: translateX(2px);
                text-shadow: 3px 0 0px 0px;
            }
        }
        p {
            font-size: 14px;
            color: #747373;
            margin: 0 13px 0 65px;
        }
        p:hover {
            color: #0fa8ca;
        }
    }
    .border_top {
        width: 135px;
        margin: 0 auto;
        border-top: 1px solid #444444;
    }
    .border_bot {
        border-bottom: 1px solid #444444;
        width: 135px;
        margin: 13px auto;
    }
    .img_mid_box {
        margin: 10px 0px 0 13px;
    }
    .img_mid {
        width: 156px;
        padding-top: 8px;
        .img_box {
            width: 53px;
        }
        img {
            width: 100%;
            &:hover {
                transform: translateX(2px);
            }
        }
        span {
            font-size: 12px;
            color: #747474;
            margin: 0 28px 0 0px;
        }
    }
    //  <!--左侧----左下开始-------->
    .zuo_bottom {
        width: 156px;
        margin: 7px 0 0 44px;
        text-align: center;
        &:hover {
            transform: translateY(5px);
            box-shadow: 0 5px 5px 2px skyblue;
        }
        .bottom {
            width: 156px;
            height: 527px;
            background: #252525;
            color: #139ab8;
            p {
                font-size: 14px;
                color: #747373;
                &:hover {
                    transform: translateX(3px);
                }
            }
            span {
                display: inline-block;
                text-align: center;
                font-size: 14px;
                margin: 10px auto;
                &:hover {
                    transform: translateX(3px);
                }
            }
            .bottom_box {
                width: 120px;
                margin: 0 0px 0 12px;
                p {
                    text-align: left;
                    margin: 0 9px;
                    &:hover {
                        color: skyblue;
                        transform: translateX(2px);
                    }
                }
            }
            .bottom_img_box {
                width: 156px;
                padding-top: 10px;
                position: relative;
                div {
                    display: inline-block;
                    p {
                        font-size: 14px;
                        color: #7d7d7d;
                        margin: 0px 0 0px px;
                    }
                }
                .onlive {
                    width: 10px;
                    height: 10px;
                    border-radius: 10px;
                    background: #00ff18;
                    position: absolute;
                    left: 39px;
                    bottom: 0;
                    animation-name: flash;
                    animation-iteration-count: infinite;
                }
            }
            .bottom_img {
                width: 53px;
                //              height: 100px;
                display: inline-block;
                position: relative;
                &:hover {
                    transform: translateX(2px);
                }
                img {
                    width: 100%;
                }
            }
            //          .bottom_img::before{
            //                  content: "";
            //                  width: 10px;
            //                  height: 10px;
            //                  border-radius: 10px;
            //                  background: skyblue;
            //                  position: absolute;
            //                  bottom: 7px;
            //                  right: 0;
            //                  z-index: 999;
            //                  animation-name: flash ;
            //                  animation-iteration-count: infinite;
            //              } 
            .foot_box {
                display: inline-block;
                margin: 0px 0 15px 0;
            }
            .foot_bot {
                width: 135px;
                margin: 0 auto;
                margin-top: 10px;
                border: 1px solid #444444;
            }
            .foot p {
                font-size: 14px;
                color: #747373;
                margin: 18px 13px 0 65px;
            }
            p:hover {
                color: #0fa8ca;
            }
        }
    }
}